import React from 'react';
import Facialmaskylcs from './Facialmaskylcs.js'
import Slimg from '../img/diy/shuliang.png'
class Facialmaskpage6 extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
            title:"数量",
            num: {
                dname:"",
                name:""
            }
	    }
	}
	componentWillMount(){

	}
    componentDidMount(){
        
        this.selectCondition()
      
    }
    selectCondition(){
        var _this=this
        var clickEvt=function(ele){
            if(ele.flag){
                let num
                if(ele.index==0){
                    num={
                        dname:"6片/盒",
                        name:"shuliang-a"
                    }
                }else{
                    num={
                        dname:"12片/盒",
                        name:"shuliang-b"
                    }
                }
                _this.setState({
                    num:num
                })
            }else{
                _this.setState({
                    num:{
                        dname:"",
                        name:""
                    }
                })
            }
            _this.props.callback(_this.state.num)
            var a = [];
            var p = ele.parentNode.children;
            for(var i =0;i<p.length;i++) {
                if(p[i] !== ele) a.push(p[i]);
            }
            for(let j=0;j<a.length;j++){
                a[j].classList.remove("fmp-select-content-active")
                a[j].querySelector(".fmp-sc-icon").classList.remove("fmp-sc-icon-active")
                a[j].flag=false;
            }
            ele.classList.toggle("fmp-select-content-active")
            ele.querySelector(".fmp-sc-icon").classList.toggle("fmp-sc-icon-active")
        }
        var showTab=function(ele){     
            if(ele.flag==true){
                content[0].classList.remove("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                    if(items[i] === ele) {
                        contents[i].classList.add("fmp-select-tip-active")
                    } else {
                        contents[i].classList.remove("fmp-select-tip-active")
                    }
                }
            }else{
                content[0].classList.add("fmp-select-tip-active")
                for(let i = 0, len = items.length; i < len; i++) {
                        contents[i].classList.remove("fmp-select-tip-active")
                }
            }
        }
        var items=document.querySelectorAll(".fmp6-select-content");
        var content=document.querySelectorAll(".fmp6-st-exp")
        var contents=document.querySelectorAll(".fmp6-st-explain");
        for(let i=0;i<items.length;i++){
            items[i].flag=false;
            items[i].index=i
            items[i].addEventListener("click",function(e){
                this.flag=(this.flag==true)?false:true;       
                clickEvt(e.currentTarget);
                showTab(this) 
            });
        }
    }
    clickScroll(){
        this.props.clickBack(6)
    }
    returnOrder(){
        this.props.clickRetOrder(6)
    }
    render() {
        return (
              <div className="fmp-container" style={{top: "500%"}} id="fmpage6">
            	<div className="fmt-container boxshaw">
                    <div className="fmt-container-circle">
                        <div className="fmt-container-circle-line"></div>
                    </div>
                    <span>{this.state.title}</span>
                </div>

            	<div className="fmp-sign">
                    <div className="fmp-sign-img">
                        <img src={Slimg}/>
                    </div>
                    <div className="fmp-sign-wz">
                        <p>&nbsp;小懒系列漫画之</p>
                        <p>《萌拼面膜研究》</p>
                    </div>
                     {this.props.isreturn?
                    <div className="fmp-sign-return" onClick={this.returnOrder.bind(this)}>
                        返回订单
                    </div>:""}
                </div>
                <p className="bn-tishi">《《请上下滑动切换选择成分》》</p>
                <div className="fmp-select boxshaw">
                    <div className="fmp-select-title">
                       <p>萌拼精选了两个<span className="fmp-select-title-span">数量</span>套装<i className="iconfont">&#xe616;</i></p>
                    </div>
                    <div className="fmp-select-explain">
                        <p>选取12片装价格更优惠哦！</p>
                    </div>
                    <ul className="fmp-select-row"> 
                        <li className="fmp-select-content fmp6-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>                 
                            <div className="fmp-sc-detail">
                                <p>6片/盒</p>
                            </div>
                        </li>
                        <li className="fmp-select-content fmp6-select-content">
                            <i className="iconfont fmp-sc-icon">&#xe73d;</i>
                            <div className="fmp-sc-detail">
                                <p>12片/盒</p>
                            </div>
                        </li>
                    </ul>
                    <div className="fmp-select-tip">
                        <div className="fmp6-st-exp fmp-select-tip-active"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">用量提示</span><p className="fmp-select-tip-wz">12片装更优惠哦！</p></div>
                        <div className="fmp6-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">用量提示</span><p className="fmp-select-tip-wz">可以用1周至2周</p></div>
                        <div className="fmp6-st-explain"><i className="iconfont fmp-select-tip-icon">&#xe629;</i><span className="fmp-select-tip-iconwz">用量提示</span><p className="fmp-select-tip-wz">可以用约1个月</p></div>
                    </div>
                    <div className="fmp-select-bottom">
                        <i className="iconfont" onClick={this.clickScroll.bind(this)}>&#xe66f;</i>
                    </div>   
                </div>
            </div>
        )
    }
}


export default Facialmaskpage6;